---
description:
  Props declared on your components are expressed through the editor UI. This
  guide shows your what inputs will be shown for a given type.
---

Props declared on your components are expressed through the editor UI. This
guide shows your what inputs will be shown for a given type.

## Primitive types

For props of types `string`, `number`, and `boolean` an editable input or
checkbox will be shown.

```tsx
interface ComponentProps {
  x: number; // a number input is shown
  name: string; // a text input is shown
  isEnabled: boolean; // a checkbox is shown
}

export function Component(props: ComponentProps);
```

## Tuple types

Tuple types are shown as a list of inputs in the editor. All supported types can
be used in tuples, which can also be labelled.

```tsx
interface ComponentProps {
  size?: [x: number, y: number, z: number];
}

export function Component(props: ComponentProps);
```

## Literal union types

Literal union types are shown as a select with the possible values in the
editor. Both string and number literals are supported.

```tsx
interface ComponentProps {
  size?: "small" | "medium" | "large";
}

export function Component(props: ComponentProps);
```

## Union types

Union types are able to be toggled through the editor. All supported types can
be used in unions.

```tsx
interface ComponentProps {
  size?: number | [number, number] | [number, number, number];
}

export function Component(props: ComponentProps);
```

## Default values

Props that are optional and have an initialized value are respected by the
editor.

```tsx
interface ComponentProps {
  isEnabled?: boolean;
}

// isEnabled is checked by default in the editor
export function Component({ isEnabled = true }: ComponentProps);
```

## Tags

Component props can declare optional JSDoc tags that give Triplex extra
information about how to handle the prop through the UI. A prop can have
multiple tags declared.

All supported tags are listed here.

### @max

Constrains the value of the prop to not be above this number.

Supported prop types: `number`

```tsx
interface ComponentProps {
  /** @max 10 */
  x: number;
}
```

### @min

Constrains the value of the prop to not be below this number.

Supported prop types: `number`

```tsx
interface ComponentProps {
  /** @min -5 */
  x: number;
}
```

### @step

Constrains each value change of the prop to be in increments of this value.

Supported prop types: `number`

```tsx
interface ComponentProps {
  /** @step 1 */
  x: number;
}
```
